import React from 'react'
import { Progress,Card,Row,Col,Button,Icon,Table } from 'antd';
import {Link} from 'react-router-dom'
import PureRenderMixin from 'react-addons-pure-render-mixin'

import LeftMenu from 'component/leftmenu/index.jsx';
import HeadImgContent from 'component/headimgcontent/index.jsx';

import MMUtile from 'util/mm.jsx'
import User from 'service/user-service.jsx'
import './style.css'

const _mm = new MMUtile();
const _user = new User();

const { Column, ColumnGroup } = Table;

class Home extends React.Component{
	constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    this.state={
			isbindphone:false,
			isbindemail:false,
			isbindsecurity:false,
			Security:1,//0表示设置密保，1表示未设置
			loginAddress:"",//上一次登录地址
			phone:"",//手机号
			nickName:"",//昵称
			ip:"",//ip
			loginDate:"",//上一次登录时间
			email:"",//邮箱
			safe:0,//安全评分
			imgsrc:'',
			data:[{
			  key: '1',
			  datetime: '2018-03-16 12:12:12',
			  ip: '175.10.*.*',
			  city: '湖南 长沙'
			}],
			columns: [{
			  title: '时间',
			  dataIndex: 'datetime',
			}, {
			  title: 'IP',
			  dataIndex: 'ip',
			}, {
			  title: '城市',
			  dataIndex: 'city',
			}]

    }
  }

  componentDidMount(){
  	_user.getUserBaseMsg().then((res)=>{
			this.setState({
				Security:res.Security,//0表示设置密保，1表示未设置
				loginAddress:res.loginAddress,//上一次登录地址
				phone:res.phone,//手机号
				nickName:res.nickName,//昵称
				ip:res.ip,//ip
				loginDate:res.loginDate,//上一次登录时间
				email:res.email,//邮箱
				safe:res.safe?res.safe:0,//安全评分
				imgsrc:res.imgsrc?res.imgsrc:_mm.getStorage('headimgbase64')?_mm.getStorage('headimgbase64'):'',//头像
				data:[{
					key: '1',
				  datetime: res.loginDate,
				  ip: res.ip,
				  city:res.loginAddress
				}]
			})
			_mm.setStorage('userInfo',res);
			
		},(errMsg)=>{
			_mm.errorTips(errMsg);
		})
	}
  
	render(){

		return(
			<div >
				<Row gutter={24}>
					<Col span={7}>
						<LeftMenu>
		        	<HeadImgContent imgsrc={this.state.imgsrc}  nickName={this.state.nickName} loginDate={this.state.loginDate} loginAddress={this.state.loginAddress}></HeadImgContent>
		        </LeftMenu>
		        <Card bordered={true}>
		        	<h3>常用操作</h3>
		        	<br/>
		        	<div className="menuitembox" >
								<div className="floatleftmenu"><Icon className="fongSize18" type="lock" /> 修改密码</div>
								<div className="floatrightmenu"><Link to="/updatepsw">修改</Link></div>
		        	</div>
		        	<div  className="menuitembox" >
								<div className="floatblockmenu"><Icon className="fongSize18" type="mobile" /> 绑定手机</div>
		        	</div>
		        	<div  className="menuitembox" >
								<div className="floatleftmenu">{
									this.state.phone?<span className="colornormal">{this.state.phone}</span>
									:<span className="colorwarning">未绑定</span>
								}</div>
								<div className="floatrightmenu">{
									this.state.phone?<Link to="/updatephone">修改</Link>
									:<Link to="/updatephone">绑定</Link>
								}</div>
		        	</div>
		        	<div  className="menuitembox" >
								<div className="floatblockmenu"><Icon className="fongSize18" type="schedule" /> 设置密保</div>
		        	</div>
		        	<div  className="menuitembox" >
								<div className="floatleftmenu">{
									this.state.Security==1?<span className="colorwarning">未设置</span>
									:<span className="colornormal">已设置</span>
								}</div>
								<div className="floatrightmenu">{
									this.state.Security==1?<Link to="/security">设置</Link>
									:<Link to="/security">修改</Link>
								}</div>
		        	</div>
		        	<div  className="menuitembox" >
								<div className="floatblockmenu"><Icon className="fongSize18"  type="mail" /> 绑定邮箱</div>
		        	</div>
		        	<div  className="menuitembox" >
								<div className="floatleftmenu">{
									this.state.email?<span className="colornormal">{this.state.email}</span>
									:<span className="colorwarning">未绑定</span>
								}</div>
								<div className="floatrightmenu">{
									this.state.email?<Link to="/updateemail">修改</Link>
									:<Link to="/updateemail">绑定</Link>
								}</div>
		        	</div>
		        </Card>
		      </Col>
		      <Col span={17}>
		        <Card title="安全评分" bordered={false}>
		        	<Row>
		        		<Col span={20} style={{lineHeight:'40px'}}><Progress percent={this.state.safe} status="active" showInfo={false} /></Col>
		        		<Col span={4}><div className="saftynum">{this.state.safe}分</div></Col>
		        	</Row>
		        	<Row className="lineheight60">
		        		<Col span={20} style={{lineHeight:'40px'}}><span>修改密码：请定期修改密码，提高账户安全等级 </span></Col>
		        		<Col span={4}><Link to="/updatepsw"><Button type="primary">修改密码</Button></Link></Col>
		        	</Row>
		        	{
		        		!this.state.phone?<Row className="lineheight60">
		        		<Col span={20} style={{lineHeight:'40px'}}><span>绑定手机号</span></Col>
		        		<Col span={4}><Button type="primary">绑定手机</Button></Col>
		        	</Row>
		        	:''
		        	}
		        	{
		        		!this.state.email?<Row className="lineheight60">
		        		<Col span={20} style={{lineHeight:'40px'}}><span>绑定邮箱</span></Col>
		        		<Col span={4}><Link to="/updateemail"><Button type="primary">绑定邮箱</Button></Link></Col>
		        	</Row>
		        	:''
		        	}
		        	{
		        		this.state.Security?<Row className="lineheight60">
		        		<Col span={20} style={{lineHeight:'40px'}}><span>设置密保 </span></Col>
		        		<Col span={4}><Link to="/security"><Button type="primary">设置密保</Button></Link></Col>
		        	</Row>
		        	:''
		        	}
		        	<Row className="lineheight60">
		        		<Col span={20} style={{lineHeight:'40px'}}><span>修改基本资料 </span></Col>
		        		<Col span={4}><Link to="/user-base"><Button type="primary">修改资料</Button></Link></Col>
		        	</Row>
		        </Card>
		        <Card title="登录记录" bordered={false}>
		        	<Row>
		        		<Col span={24} style={{lineHeight:'40px'}}>以下为您最近登录记录，若存在异常情况，请在核实后尽快 <Link to="/updatepsw"><Button type="primary">修改密码</Button></Link></Col>
		        		<Col span={24}>
			        		<Table columns={this.state.columns} dataSource={this.state.data} pagination={false} />
		        		</Col>
		        	</Row>
		        </Card>
		      </Col>
				</Row>
			</div>
		)
	}
}

export default Home;